<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<link>
<meta charset="UTF-8" />
<title>车联网模块演示</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=7d90c90b1dbe8a8aab6e0d7a77123ecb&plugin=AMap.MouseTool"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.0.3/sockjs.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<style type="text/css">
    #container{
        height:500px;
    }
</style>
</head>
<body>
<noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript>
<div class="container">
    <div class="row tab-content">
        <div class="panel panel-primary tab-pane fade in active" id="mq">
            <div class="panel-heading" th:with="id=${#httpServletRequest.getParameter('page')}">
                <h3 class="panel-title" th:text="${id=='00007928000000000004'?'有人GPS模块演示':'有人模块演示'}"></h3>
            </div>
            <div class="panel-body">
                <div class="row" >
                    <div class="container">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <span class="label label-danger ">当前GPS信号弱</span>
                                <span class="label label-success" style="display: none">GPS信号正常</span>
                                <span class="label label-info">方位角:0度</span>
                            </div>
                        </form>
                        <div class="col-md-12" style="margin-top: 5px">
                            <div id="container"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<!--（1）连接SockJS的endpoint是“endpointWisely”，与后台代码中注册的endpoint要一样。

（2）创建STOMP协议的webSocket客户端。

（3）连接webSocket的服务端。

（4）通过stompClient.subscribe（）订阅服务器的目标是'/topic/getResponse'发送过来的地址，与@SendTo中的地址对应。

（5）通过stompClient.send（）向地址为"/welcome"的服务器地址发起请求，与@MessageMapping里的地址对应。-->

<script th:src="@{../js/wgs2mars.min.js}"></script>
<script>
    var infoWindow=null;
</script>
<script type="text/javascript">
    var positions=[];
    var geocoder;
    var ar=0;
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });
    //在指定位置打开信息窗体
    function openInfo(lon,lan,s,po,add) {
        //构建信息窗体中显示的内容
        infoWindow = new AMap.InfoWindow({
            content:getinfo(lon,lan,s,add) , //使用默认信息窗体框样式，显示信息内容
            offset: new AMap.Pixel(4, -20)//-113, -140
        });
        infoWindow.open(map,po);
    }
    function getinfo(lon,lan,s,add) {
        var info = [];
        info.push("<div><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
        info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>车辆GPS信息</b>");
        info.push("LON".replace("LON",lon));
        info.push("LAN".replace("LAN",lan));
        info.push("地址 : ADD".replace("ADD",add))
        info.push("速度 :S</div></div>".replace("S",s));
        return info.join("<br/>");
    }
    //坐标转换为地址
    AMap.plugin('AMap.Geocoder',function(){
         geocoder = new AMap.Geocoder({
            city: "010"//城市，默认：“全国”
        });
    });
    //转换坐标格式 为度
    function positione(array) {
        var lng=Number(array[0].substring(3,array[0].length))/60;
        var lat=Number(array[1].substring(2,array[0].length))/60;
        lng=Number(array[0].substring(0,2)+lng.toString());
        lat=Number(array[1].substring(0,1)+lat.toString());
        var gcjloc = transformFromWGSToGCJ(lng,lat);
        //console.log(gcjloc)
        return [gcjloc.lng,gcjloc.lat];
        //return [lng,lat];
    }
    var marker=new AMap.Marker({
        icon:"../img/carRed.png"
    });
    var n=0;
    //接收数据回调
    function USR_onRcv(data) {

        if(data.indexOf("$GNRMC")!=-1){
            data=data.split(",");
            if(data[2]=="A"){
                $(".label-success").show();
                $(".label-danger").hide();
                //经（前两位）,纬度（前三位）
                var position=positione([data[5],data[3]]);
                $(".label-info").text("方位角："+parseFloat(data[8])+" 度")
                if(positions.length!=0){
                    console.log(data[7]);
                    if(Number(data[7])>0) {//速度大于0 表示已经移动
                        positions.push(position);
                        /*                    var polyline = new AMap.Polyline({
                                                path: positions,          //设置线覆盖物路径
                                                strokeColor: "#3366FF", //线颜色
                                                strokeOpacity: 1,       //线透明度
                                                strokeWeight: 3,        //线宽
                                                strokeStyle: "solid",   //线样式
                                                strokeDasharray: [10, 5] //补充线样式
                                            });
                                            polyline.setMap(map);*/
                        marker.setAngle(parseFloat(data[8]));
                        ar=parseFloat(data[8]);
                        marker.moveTo(new AMap.LngLat(position[0], position[1]), Number(data[7]) * 1.852);
                        map.panTo(positions[positions.length-2]);
                    }else{
                        marker.setAngle(parseFloat(data[8]));
                        if(positions.length!=0&&Number(data[7])<=0){
                            marker.setAngle(ar);
                            $(".label-info").text("方位角："+parseFloat(data[8])+" 度");
                        }
                    }
                }else{
                    map.setZoomAndCenter(17,position);
                    marker.setMap(map);
                    marker.setAngle(parseFloat(data[8]));
                    marker.setPosition(position);
                    positions.push(position);
                }
                geocoder.getAddress(position,function(status,result){
                    if(status=='complete'){
                        var add=result.regeocode.formattedAddress
                        if(positions.length==1&&positions.length>0){
                            openInfo((data[6]=="E"?"东经:":"西经:")+position[0]+"度",(data[4]=="N"?"北纬:":"南纬:")+position[1]+"度",Number(data[7])*1.852+"km/h",marker.getPosition(),add);
                        }else{
                            console.log(getinfo((data[6]=="E"?"东经:":"西经:")+":"+position[0]+"度",(data[4]=="N"?"北纬:":"南纬:")+position[1]+"度",Number(data[7])*1.852+"km/h",add))
                            infoWindow.setContent(getinfo((data[6]=="E"?"东经:":"西经:")+":"+position[0]+"度",(data[4]=="N"?"北纬:":"南纬:")+position[1]+"度",Number(data[7])*1.852+"km/h",add));
                            infoWindow.setPosition(marker.getPosition());
                        }
                    }
                });

            }else{
                $(".label-danger").show();
                $(".label-success").hide();
            }
        }else{
            if(data.indexOf("N*")==-1){
                if(n>=13){
                    $("#table").empty();
                    n=0;
                }
                $("#table").append("<tr><td>DATA</td></tr>".replace("DATA",data));
                n++;
            }

        }

    }
</script>
<script>
    function connect() {
        const socket = new SockJS('/endpointSang');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topic/gps', function (response) {
                let devic=response.body;
                USR_onRcv(devic);
            });
        });
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
    }
    connect();
</script>
</body>
</html>